<template>
  <el-dialog
    :title="typeMsg + '宠物信息'"
    :visible="dialogVisible"
    width="35%"
    top="50px"
    :before-close="handleDialogVisible"
    v-if="dialogVisible"
  >
    <el-form ref="form" :value="myPetMsg" label-position="right">
      <el-form-item label="宠物名" :label-width="formLabelWidth">
        <el-input v-model="myPetMsg.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          action="#"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          :http-request="handleUploadOperate"
          :limit="1"
          :on-exceed="handleExceed"
          :before-upload="handleUploadLimit"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过10MB
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth">
        <div class="block">
          <el-slider v-model="myPetMsg.age" show-input :max="100"> </el-slider>
        </div>
      </el-form-item>
      <el-form-item label="类型" :label-width="formLabelWidth">
        <el-select v-model="petType" placeholder="请选择">
          <el-option
            v-for="item in petTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleUpdatePet">确 定</el-button>
      <el-button @click="colseDialogVisible">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { uploadResource } from "@/apis/upload";
import { updatePet, addPetMsg } from "@/apis/home";
import { EDITOR, ADD } from "@/configs/constant";
import uploadLimit from "@/mixins/uploadLimit";
export default {
  mixins: [uploadLimit],
  props: [
    "dialogVisible",
    "handleDialogVisible",
    "petMsg",
    "paginationMsg",
    "getPetListMsg",
    "colseDialogVisible",
    "type",
    "typeMsg",
  ],
  data() {
    return {
      value: 0,
      formLabelWidth: "80px",
      fileList: [{ name: "", url: "" }],
      fileListCopy: [],
      myPetMsg: {},
      pictureUrl: "",
      petTypes: [
        {
          value: "猫类",
          label: "猫类",
        },
        {
          value: "狗类",
          label: "狗类",
        },
      ],
      petType: "",
    };
  },
  methods: {
    handleExceed() {
      this.$message.warning("请先把原有图片删除再进行上传");
    },
    handleRemove() {
      this.pictureUrl = "";
    },

    async handleUploadOperate(fileMsg) {
      this.hasFile(fileMsg, this.formData)
      const { data } = await uploadResource(this.formData);
      this.pictureUrl = data;
      this.$message.success("上传成功");
    },
    async handleUpdatePet() {
      this.$confirm(`确定要${this.typeMsg}吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let fromMsg = {
            ...this.myPetMsg,
            pictureUrl: this.pictureUrl,
            type: this.petType,
          };
          if (this.type === EDITOR) {
            const data = await updatePet(fromMsg);
          } else if (this.type === ADD) {
            fromMsg = {
              ...fromMsg,
              id: 0,
              userId: 0,
            };
            const data = await addPetMsg(fromMsg);
          }

          const { pageNum, pageSize } = this.paginationMsg;
          this.getPetListMsg(pageNum, pageSize);
          this.handleDialogVisible();
          this.$message({
            type: "success",
            message: `${this.typeMsg}成功!`,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${this.typeMsg}`,
          });
        });
    },
  },
  watch: {
    petMsg(newVal, oldVal) {
      this.myPetMsg = { ...newVal };
      this.fileList[0] = { name: "", url: this.myPetMsg.pictureUrl };
      this.pictureUrl = this.myPetMsg.pictureUrl;
      this.petType = this.myPetMsg.type;
    },
    type(newVal, oldVal) {
      if (newVal === ADD) {
        this.fileList = [];
      }
    },
  },
};
</script>

<style lang="less" scoped>
form {
  padding: 0;
}
:deep .el-form-item {
  width: 100%;
}
</style>
